<template>

  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->

      <div id="BackLink">
        <a href="main">回到主页面</a>
      </div>

      <div id="Catalog">
        <h2> {{ productId_form.productId}}</h2>
      </div>
      <div class="public-shop-cart-one">
        <div class="content">
          <span>List</span>

          <div class="cart-title">
            <span>Item ID</span>
            <span>Product ID</span>
            <span>Description</span>
            <span>List Price</span>
            <span>Operation</span>
          </div>

          <div class="cart-detail" v-for="item in items">
              <div class="cart-title" >
                <router-link to="/catalog/Item" @click="handleClick(toRaw(item).itemId)">{{ toRaw(item).itemId }}</router-link>
              </div>
              <div class="cart-price">{{ toRaw(item).productId }}</div>

              <div class="cart-price">
                {{ toRaw(item).attribute1}}
                {{ toRaw(item).attribute2}}
                {{ toRaw(item).attribute3}}
                {{ item.attribute4}}
              </div>
            <div class="cart-price">{{ toRaw(item).listPrice }}</div>

            <div class="cart-price">
              <router-link to="/cart/cart"><a class="Button" @click="AddToCart(toRaw(item).itemId)">Add to Cart</a></router-link>
            </div>
          </div>

        </div>
      </div>

      <!--以下是尾部信息-->
    </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {useStore} from "vuex";
import api from "../../api/index.js";
const store = useStore()
import {toRaw} from "vue";

const item1Session = reactive([])//这是一个数组
const item1_form = reactive({
  itemId:'',
  productId:'',
  listPrice:'',
  unitCost: '',
  supplierId: '',
  status: '',
  attribute1:'',
  attribute2:'',
  attribute3:'',
  attribute4:'',
  attribute5:''
})

const productId_form = reactive({
  productId:''
})

const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

import { ref } from 'vue'
//响应式数组，用来存储items
const items = ref([])

onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData();
})

const searchKeyword = ref('')

//搜索部分内容
function searchProducts() {
  // 这里写提交搜索的逻辑代码，使用searchKeyword.value获取搜索关键字
  console.log(searchKeyword.value);
  api.getSearchResult(searchKeyword.value).then(res => {
    //这里首先要判断一下状态码
    console.log("好好回去");
    var statusCode = res.data.status;
    console.log("statusCode is : " + statusCode);
  })
}

const getData = () =>{
  //获取后端对象
  api.getItemByNothing().then(res => {
    var statusCode = res.data.status;
    console.log("statusCode is : " + statusCode);
    items.value=res.data.data;
    console.log(res.data.data[0].productId);
    productId_form.productId=res.data.data[0].productId;
})}


function handleClick(itemId) {
  console.log("hhhh");
  //测试后端向前端传数据，成功！
  api.putCartItem(itemId).then(res => {

    console.log(itemId);
  })
}

function addProductSession(itemId) {
  console.log("hhhh");
  //测试后端向前端传数据，成功！
  api.putCartItem(itemId).then(res => {
    console.log(itemId);
  })
}

const AddToCart = (itemId) =>{
  console.log(itemId);
  api.addItemToCart(itemId).then(res => {
    console.log(res);
  })
}

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清除服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}
</script>

<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>